<template>
  <van-list
    offset="200"
    finished-text="没有更多了"
    @load="onLoad"
    class="search-history"
    v-show="historyList.length"
  >
    <!-- v-model:loading="vantListstate.loading"
    :finished="vantListstate.finished"
    v-model:error="vantListstate.error" -->
    <h1 class="title">
      <span class="text">搜索历史</span>
      <span class="clear" @click="showConfirm">
        <i class="icon-clear"></i>
      </span>
    </h1>
    <div class="search-list">
      <transition-group name="list" tag="ul">
        <li
          v-for="(item, index) in historyList"
          :key="index"
          class="search-item"
          @click="setQuery(item)"
        >
          <span class="text">{{ item }}</span>
          <span
            v-if="showDelete"
            class="icon"
            @click.stop="removeHistoryItem(item)"
          >
            <i class="icon-delete"></i>
          </span>
        </li>
      </transition-group>
    </div>
  </van-list>
  <!-- <div class="search-history" v-show="historyList.length">
    <h1 class="title">
      <span class="text">搜索历史</span>
      <span class="clear" @click="showConfirm">
        <i class="icon-clear"></i>
      </span>
    </h1>
    <div class="search-list">
      <transition-group name="list" tag="ul">
        <li
          v-for="(item, index) in historyList"
          :key="index"
          class="search-item"
          @click="setQuery(item)"
        >
          <span class="text">{{ item }}</span>
          <span
            v-if="showDelete"
            class="icon"
            @click.stop="removeHistoryItem(item)"
          >
            <i class="icon-delete"></i>
          </span>
        </li>
      </transition-group>
    </div>
  </div> -->
</template>
<script>
import { Dialog } from 'vant'
import useHistory from './use-history'
import { reactive } from 'vue'
export default {
  name: 'SearchList',
  props: {
    showDelete: Boolean
  },
  setup(props, content) {
    const vantListstate = reactive({
      loading: false,
      finished: false
      // error: true
    })

    function onLoad() {
      if (!props.query) return
      console.log('onLoad')
      vantListstate.loading = true
      // // 数据全部加载完成
      // // if (vantListstate.list.length >= 40) {
      // // }
      setTimeout(() => {
        vantListstate.loading = false
        vantListstate.finished = true
      })
    }
    // 全部删除
    function showConfirm() {
      Dialog.confirm({
        title: '是否清空搜索记录？'
      })
        .then(() => {
          // on confirm
          removeHistory()
        })
        .catch(() => {
          // on cancel
        })
    }
    function setQuery(item) {
      content.emit('addQuery', item)
    }

    function emitAddHistory(item) {
      addHistory(item)
    }

    const {
      historyList,
      addHistory,
      removeHistoryItem,
      removeHistory
    } = useHistory(props)

    return {
      vantListstate,
      onLoad,
      emitAddHistory,
      setQuery,
      historyList,
      removeHistoryItem,
      showConfirm
    }
  }
}
</script>
<style lang="scss" scoped>
.search-history {
  position: relative;
  margin: 0 20px;
  .title {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: $font-size-medium;
    color: $color-text-l;
    .text {
      flex: 1;
    }
    .clear {
      @include extend-click();
      .icon-clear {
        font-size: $font-size-medium;
        color: $color-text-d;
      }
    }
  }
  .search-list {
    .search-item {
      display: flex;
      align-items: center;
      height: 40px;
      overflow: hidden;
      .text {
        flex: 1;
        color: $color-text-l;
      }
      .icon {
        @include extend-click();
        .icon-delete {
          font-size: $font-size-small;
          color: $color-text-d;
        }
      }
      &:last-child {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
